<template>
  <div class="app-container">
    <div class="docs-content">
      <h1>API文档</h1>
      <div class="docs-section">
        <h2>快速入门</h2>
        <p>欢迎使用我们的API开放平台。本文档将帮助您快速了解和使用我们的API服务。</p>
      </div>
      
      <div class="docs-section">
        <h2>认证方式</h2>
        <p>我们的API采用API Key认证方式。您需要在请求头中添加您的API Key:</p>
        <pre><code>Authorization: Bearer your-api-key</code></pre>
      </div>

      <div class="docs-section">
        <h2>调用限制</h2>
        <ul>
          <li>每个API都有每日调用次数限制</li>
          <li>部分API可能有QPS限制</li>
          <li>超出限制将返回429状态码</li>
        </ul>
      </div>

      <div class="docs-section">
        <h2>错误码说明</h2>
        <el-table :data="errorCodes" style="width: 100%">
          <el-table-column prop="code" label="错误码" width="180" />
          <el-table-column prop="message" label="说明" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FrontDocs',
  data() {
    return {
      errorCodes: [
        { code: '400', message: '请求参数错误' },
        { code: '401', message: '未授权或API Key无效' },
        { code: '403', message: '没有权限访问该API' },
        { code: '404', message: 'API不存在' },
        { code: '429', message: '超出调用限制' },
        { code: '500', message: '服务器内部错误' }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);

  .docs-content {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 30px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,21,41,.08);

    h1 {
      margin: 0 0 30px;
      font-size: 28px;
      color: #303133;
    }

    .docs-section {
      margin-bottom: 40px;

      h2 {
        margin: 0 0 20px;
        font-size: 20px;
        color: #303133;
      }

      p {
        margin: 0 0 15px;
        color: #606266;
        line-height: 1.6;
      }

      ul {
        margin: 0;
        padding-left: 20px;
        color: #606266;

        li {
          margin-bottom: 10px;
        }
      }

      pre {
        background: #f5f7fa;
        padding: 15px;
        border-radius: 4px;
        margin: 15px 0;

        code {
          color: #409EFF;
          font-family: monospace;
        }
      }
    }
  }
}
</style> 